vue 自定义指令 |

一、vue 自定义指令

说明

作用：dom处理逻辑的封装
注意：使用时同样需要添加v-前缀
分类：全局指令与局部指令

定义

全局指令

Vue.directive(name, config)

任何 Vue 实例所关联的视图中都可以使用

局部指令

new Vue({ directives: { name1: config, name2: config } })

只能在当前实例所关联的视图中使用

配置项

bind

只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted

被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。

update

元素或值更新时调用，值更新时需要调用 v-test="val"，val 是模型变量。

unbind

只调用一次，指令与元素解绑时调用。

函数参数

定义指令时大部分是在bind与update时做操作
可以考虑使用简写方式，传递一个函数，在 bind 与 update 时调用
比如：Vue.directive(name, fn)

自定义指令简写

文字高亮

1	<p v-html='content' v-hint:abc='keyword'></p>

Vue.directive('hint',function(node, obj) {
    // bind 与 update 时会执行
    // obj.arg 可以拿到指定的值
    // 先拿到元素身上的文本内容，然后进行替换
    var content = node.innerHTML;
    node.innerHTML = content.replace(obj.value,'<strong>'+obj.value + '</strong>');
});

示例1

应用场景：页面一但刷新，输入框会自动获取焦点

1
2
3

<div id="app">
    <input v-focus type="text" />
</div>

// 创建一个全局自定义指令
// 该方法第一个参数是指令名称，这个名称和使用有关，第二个参数是配置项
Vue.directive('focus', {
  // 当vue解析标签时，会分析该标签使用了哪些指令，然后依次执行每个指令的功能
    inserted: function(el, binding, vnode, oldnode) {
        el.focus();
    }
});

示例2

1
2
3

<div id="app">
    <p v-hint:strong="keyword" v-html="content"></p>
</div>

Vue.directive('hint', function(el, binding) {
    // 指令的参数配置标签名，值配置关键字
    let tag = binding.arg || 'i',
        keyword = binding.value;

    // 元素内的文本内容，及关键字匹配正则
    let text = el.textContent,
        reg = new RegExp(keyword, 'g');

    // 关键字加亮
    el.innerHTML = text.replace(reg, function(text) {
        let style = 'red';
        return `<${tag} style="color: ${style}">${text}</${tag}>`;
    });
});
var vm = new Vue({
    el: '#app',
    data: {
        keyword: '我',
        content: '我想让自己放轻松一点，只可惜比我强的人从不这么想...'
    }
});